<template>
  <div class="active_template" :class="{isHeadHide:$root.ISAPP}">
    <v-header v-if="!fullData.data&&!$root.ISAPP&&!isin&&!notself">
      <div class="nav-tab2">
        <h3 v-if='templateData[0]'>{{templateData[0].title}}</h3>
      </div>
    </v-header>
    <template v-if="!fullData.data">
      <ul class="tempcontent" @click="activeClick">
        <li v-for="(temp,idx) in templateData" :key="idx">
         <v-delay :delay="idx*300">
          <!-- type === 0  图片-->
          <div v-if="temp.type === 0" class="templist list_image clearfix" :style="{ marginTop: temp.top+'px', marginBottom: temp.bottom + 'px' }">
            <p v-for="(label,index) in temp.data" :key="index" class="tempitem" :style="{width:label.percent+'%'}" v-web-app="label">
              <img v-lazy="dealImg(label.imageurl)">
            </p>
          </div>
          <!-- type === 9  图片-->
          <div v-if="temp.type === 9" class="templist list_image clearfix" :style="{ marginTop: temp.top+'px', marginBottom: temp.bottom + 'px' }">
            <p v-for="(label,index) in temp.data" :key="index" class="tempitem" :style="{width:label.percent+'%'}" @click="getConHon(label,temp.editIndex)">
              <img v-lazy="dealImg(label.imageurl)">
            </p>
          </div>
          <!-- type === 1  视频-->
          <div v-if="temp.type === 1 && temp.isEdit" class="templist list_video" :style="{ marginTop: temp.top+'px', marginBottom: temp.bottom + 'px' }">
            <section class="tempitem" v-for="(vid,index) in temp.data" :key="index">
              <video controls preload='true' webkit-playsinline="webkit-playsinline" playsinline="playsinline" loop='false' :poster="vid.imageurl" :style="{ margin:'0 auto',width:'100%'}" autobuffer>
                <source :src="vid.videourl|https" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
              </video>
            </section>
          </div>
          <!-- type === 2  轮播图片-->
          <div v-if="temp.type === 2 && temp.isEdit" class="templist list_slider" :style="{ marginTop: temp.top+'px', marginBottom: temp.bottom + 'px' }">
            <swiper :options="swiperAllPic" class="swiper-container swiper2">
              <swiper-slide v-for="(item,index) in temp.data" :key='index' v-web-app="item">
                <section>
                  <img v-lazy="https(item.imageurl)">
                </section>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <!-- type === 3  滚动图片freemode-->
          <div v-if="temp.type === 3 && temp.isEdit" class="templist list_scroll" :style="{ marginTop:temp.top + 'px',marginBottom:temp.bottom+'px'}">
            <swiper :options="swiperPicsPiece" class="swiper-container swiper2">
              <swiper-slide v-for="(item,index) in temp.data" :key='index'>
                <section v-web-app="item">
                  <img v-lazy="https(item.imageurl)">
                </section>
              </swiper-slide>
            </swiper>
          </div>
          <!-- type === 4  产品列表-->
          <div v-if="temp.type === 4 && temp.isEdit" class="templist list_product clearfix" :style="{ marginTop:temp.top + 'px',marginBottom:temp.bottom+'px'}">
            <section v-for="(lis,index) in temp.data" :key="index" class="tempitem" v-web-app="lis" :data-id='lis.urlname' :data-typename='lis.typeName'>
              <img v-lazy="dealImg(lis.mainpic)">
              <p class="name"> {{lis.productname}} </p>
              <p class="price">
                <span>¥{{parseFloat(lis.price).toFixed(2)}}</span>
                <!--<span v-show="lis.isoverseas"> +TAX</span>-->
                <span class="del" v-if="lis.delprice>0&&lis.delprice!=lis.price">{{parseFloat(lis.delprice).toFixed(2)}}</span>
              </p>
            </section>
          </div>
          <!-- type === 5  产品滚动带产品名称和价格freemode -->
          <div v-if="temp.type === 5 && temp.isEdit" class="templist list_product_srcoll" :style="{marginTop:temp.top+'px',marginBottom:temp.bottom+'px'}">
            <section class="tempitem">
              <swiper :options="swiperProdsPiece" class="swiper-container swiper2">
                <swiper-slide v-for="(prod,index) in temp.data" :key='index' v-web-app="prod" :data-id='prod.urlname' :data-typename='prod.typeName'>
                  <img v-lazy="dealImg(prod.mainpic)">
                  <p class="name"> {{prod.productname}} </p>
                  <p class="price">
                    <span>¥{{prod.price}}</span>
                    <!--<span v-show="prod.isoverseas"> +TAX</span>-->
                  </p>
                </swiper-slide>
              </swiper>
            </section>
          </div>
          <!-- type === 7  混乱布局 (相对定位点击)-->
          <div v-if="temp.type === 7 && temp.isEdit" class="templist list_mixins" :style="{marginTop:temp.top+'px',marginBottom:temp.bottom+'px'}">
            <img v-lazy="https(temp.imageurl)" alt="">
            <p class="region" v-for="(mixs,index) in temp.data" :key='index' :data-id='mixs.urlname' :data-typename='mixs.typeName' :style="{position:'absolute',width:mixs.width +'%',height:mixs.height+'%',left:mixs.left+'%',top:mixs.top+'%'}" v-web-app="mixs">
            </p>
          </div>
          <!-- type === 8  资讯列表一排一个列表 -->
          <div v-if="temp.type === 8 && temp.isEdit" class="templist list_article clearfix" :style="{marginTop:temp.top+'px',marginBottom:temp.bottom+'px'}">
            <section class="tempitem" v-for="(art,index) in temp.data" :key="index" v-web-app="art">
              <img v-lazy="dealImg(art.coverurl)">
              <p class="name"> {{art.title}}</p>
            </section>
          </div>
          </v-delay>
        </li>
      </ul>
      <div class="fix-gs-endter" v-if="showGSenter" @click="enterGS">
        <img src="//files.eyee.com/mcdn/static/img/gs-enter.png" alt="">
      </div>
    </template>
    <!-- type === 6  全屏布局 -->
    <div v-if="fullData.data" class="templist list_product_fullScreen" :style="{ height:deviceHei+'px',marginTop:fullData.top+'px',marginBottom:fullData.bottom+'px'}">
      <swiper :options="swiperFullScreen" class="swiper-container swiper2">
        <swiper-slide v-for="(item,idx) in fullData.data" :key='idx' v-web-app="item">
          <section class="full_bgimage" :style="{backgroundImage:'url('+https(item.imageurl)+')'}"></section>
        </swiper-slide>
      </swiper>
    </div>
    <div v-else-if='hasdata==1'>
      <div class="no-data">
        <img src="//files.eyee.com/mcdn/static/img/no_product.png" alt="">
        <p>活动已结束</p>
      </div>
    </div>
  </div>
</template>
<script>
import {
  CustomSubjectInfo,
  GetByCdkey,
  AddBeesBySubject
} from "../common/api/active";

const dom = window.document;

export default {
  name: "v-active",
  props: { isin: { type: Boolean, default: false }, id: String },
  data() {
    return {
      showGSenter: false,
      templateData: {},
      hasdata: 0,
      fullData: {},
      swiperAllPic: {
        autoplay: 0,
        pagination: ".swiper-pagination"
      },
      swiperPicsPiece: {
        autoplay: 0,
        freeMode: true,
        slidesPerView: 3,
        spaceBetween: 5
      },
      swiperProdsPiece: {
        autoplay: 0,
        freeMode: true,
        slidesPerView: 3,
        spaceBetween: 5
      },
      swiperFullScreen: {
        autoplay: 0
      },
      currentUser: {}
    };
  },
  mounted() {
    let _ = this;
    let t = _.templateData;
    let title = t && t.length > 0 ? t[0].title : "斗牛 Let's DoNew";
    // document.title=t&&t.length>0?t[0].title:"斗牛 Let's DoNew"
    _.mtaReport("zhuantiye_bg", { url: window.location.href });

    // if (!this.$root.ISAPP && window.location.href.indexOf('?') > -1) {
    //   window.location.href = window.location.href.split('?')[0]
    // }
    _.getActiveConts();
    _.getCurrentUser();
  },
  computed: {
    deviceHei() {
      return (
        window.innerHeight ||
        dom.documentElement.clientHeight ||
        dom.body.clientHeight
      );
    },
    notself() {
      return window.top !== window.self;
    }
  },
  methods: {
    dealImg(url){
      return this.https((url || '').split('|')[0])
    },
    getActiveConts: function() {
      let _ = this;
      // 0 商家 1平台
      let type = _.$route.query.t;
      type = isNaN(type) ? 1 : type;
      type = type > 1 ? 1 : type;
      // console.log('getActiveConts', type, _.$route.params, _.$route.query)
      let param = _.isin
        ? { subjectId: _.id, type: 0 }
        : { subjectId: _.$route.params.id, type };
      CustomSubjectInfo(param)
        .then(res => {
          if (res && res.content) {
            // 字段名与值是反的
            _.showGSenter = res.ishideqqzone;
            this.hasdata = 0;
            var templ = JSON.parse(res.content);
            // _.templateData = JSON.parse(res.content);
            console.log("CustomSubjectInfo content", JSON.parse(res.content));
            this.report("活动页-访问", window.mqq ? "qzone" : "default", {
              id: res.id,
              name: templ[0].title
            });
            for (var i = 0; i < templ.length; i++) {
              // 专题活动标题
              if (templ[i].type === 99) {
                _.$root.share.title = templ[0].title;
                _.$root.share.desc = templ[0].sharetitle;
                _.$root.share.imgUrl = templ[0].imageurl;
                _.$root.share.link =
                  window.location.origin + window.location.pathname;
                _.initShare({
                  info: {
                    title: templ[0].title,
                    desc: templ[0].sharetitle,
                    img: templ[0].imageurl
                  }
                });
              }
              if (templ[i].type === 3) {
                console.log(templ[i]);
                _.swiperPicsPiece.slidesPerView = templ[i].slidesPerView;
                _.swiperPicsPiece.spaceBetween = templ[i].spaceBetween;
              }
              // 全屏切换的时候设置参数隐藏header
              if (templ[i].type === 6) {
                _.fullData = templ[i];
              }
              if (templ[i].data) {
                for (var j = 0; j < templ[i].data.length; j++) {
                  /*
                  type: 图片：0,视频：1,轮播图片:2,滚动图片freemode:3,产品列表:4,产品带名称和价格滚动freemode:5,混乱布局:7,资讯列表:8,全屏滚动slide:6;

                  urltype:
                   0:店铺详情,
                   1:品牌百科列表页,
                   12:具体品牌首页,
                   13:品牌详情页,
                   2:商品搜索页(关键字),
                   14:分类搜索（分类id）,
                   3:产品详情,
                   4:鬼市,
                   5:潮店列表,
                   7:限量发售首页,
                   8:品牌搜索页(品牌id),
                   9:资讯详情,
                   10:资讯搜索结果页,
                   11:自定义(限专题id),
                   15：鞋子专区系列页面(系列id 分类名称)
                   16：鞋子专区详情页面(shoeid)
                  */
                  switch (templ[i].data[j].urltype) {
                    case 0:
                      templ[i].data[j].typeName = "潮店详情";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppOnlineShopHomePage",
                          params: {
                            businessid: templ[i].data[j].urlname
                          }
                        },
                        webUrl: {
                          name: "/shop/shopdetail/",
                          params: {
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 1:
                      templ[i].data[j].typeName = "品牌百科";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppBrandStorePage",
                          params: {}
                        },
                        webUrl: {
                          name: "/brand",
                          params: {}
                        }
                      };
                      break;
                    case 12:
                      templ[i].data[j].typeName = "品牌百科内容";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppBrandIntroducePage",
                          params: {
                            brandid: templ[i].data[j].urlname
                          }
                        },
                        webUrl: {
                          name: "/brandInfo/",
                          params: {
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 13:
                      templ[i].data[j].typeName = "品牌百科详情";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppBrandArticlePage",
                          params: {
                            itemid: templ[i].data[j].urlname
                          }
                        },
                        webUrl: {
                          name: "/BrandDetail/",
                          params: {
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 14:
                      templ[i].data[j].typeName = "分类搜索";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppProductListPage",
                          params: {
                            categoryid: templ[i].data[j].urlname,
                            keyword:templ[i].data[j].keyword||''
                          }
                        },
                        webUrl: {
                          name: "/results/"+(templ[i].data[j].keyword || templ[i].data[j].urlname),
                          params: {
                            type: "category",
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 2:
                      templ[i].data[j].typeName = "商品关键字搜索";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppProductListPage",
                          params: {
                            keyword:templ[i].data[j].keyword || templ[i].data[j].urlname
                          }
                        },
                        webUrl: {
                          name: "/results/"+(templ[i].data[j].keyword || templ[i].data[j].urlname),
                          params: {
                            // id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 3:
                      templ[i].data[j].typeName = "商品";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppProductDetailPage",
                          params: {
                            productid: templ[i].data[j].urlname
                          }
                        },
                        webUrl: {
                          name: "/productDetail/",
                          params: {
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 4:
                      templ[i].data[j].typeName = "鬼市";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppSpecialDetailPage",
                          params: {}
                        },
                        webUrl: {
                          name: "/mall/ghost",
                          params: {}
                        }
                      };
                      break;
                    case 5:
                      templ[i].data[j].typeName = "潮店列表";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppShopListPage",
                          params: {}
                        },
                        webUrl: {
                          name: "/mall/shop",
                          params: {}
                        }
                      };
                      break;
                    case 6:
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppNewpublishPage",
                          params: {}
                        },
                        webUrl: {
                          name: "root.home.newpro",
                          params: {}
                        }
                      };
                      break;
                    case 7:
                      templ[i].data[j].typeName = "限量发售";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppLimitSalePage",
                          params: {}
                        },
                        webUrl: {
                          name: "/mall/limit",
                          params: {}
                        }
                      };
                      break;
                    case 8:
                      templ[i].data[j].typeName = "品牌搜索";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppProductListPage",
                          params: {
                            brandid: templ[i].data[j].urlname,
                            keyword:templ[i].data[j].keyword||''
                          }
                        },
                        webUrl: {
                          name: "/results/"+(templ[i].data[j].keyword || templ[i].data[j].urlname),
                          params: {
                            type: "brand",
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 9:
                      templ[i].data[j].typeName = "资讯";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoArticleDetailPage",
                          params: {
                            articleid: templ[i].data[j].urlname,
                            articletype: templ[i].data[j].articletype
                          }
                        },
                        webUrl: {
                          name: "/news/detail/",
                          params: {
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 15:
                      templ[i].data[j].typeName = "sneaker系列页";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppShoesZonePage",
                          params: {
                            seriesid: templ[i].data[j].urlname,
                            categoryname: templ[i].data[j].shoeCateName
                          }
                        },
                        webUrl: {
                          name: "/sneakerSeries/",
                          params: {
                            categoryname: templ[i].data[j].shoeCateName,
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 16:
                      templ[i].data[j].typeName = "sneaker详情";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoAppShoesListPage",
                          params: {
                            shoeid: templ[i].data[j].urlname
                          }
                        },
                        webUrl: {
                          name: "/sneakerDetail/",
                          params: {
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 10:
                      templ[i].data[j].typeName = "资讯关键字搜索";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "gotoArticleSearchResultPage",
                          params: {
                            keyword: templ[i].data[j].urlname
                          }
                        },
                        webUrl: {
                          name: "/news/Search/",
                          params: {
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                    case 11:
                      templ[i].data[j].typeName = "自定义专题";
                      templ[i].data[j].urltype = {
                        appUrl: {
                          name: "",
                          params: {}
                        },
                        paramstype: 11,
                        webUrl: {
                          name: "/active/",
                          params: {
                            id: templ[i].data[j].urlname
                          }
                        }
                      };
                      break;
                  }

                  if (templ[i].type === 4 || templ[i].type === 5) {
                    templ[i].data[j].urltype = {
                      appUrl: {
                        name: "gotoAppProductDetailPage",
                        params: {
                          productid: templ[i].data[j].productid
                        }
                      },
                      webUrl: {
                        name: "/productDetail/",
                        params: {
                          id: templ[i].data[j].productid
                        }
                      }
                    };
                    templ[i].data[j].urlExist = true;
                  }
                  if (templ[i].type === 8) {
                    templ[i].data[j].urltype = {
                      appUrl: {
                        name: "gotoArticleDetailPage",
                        params: {
                          articleid: templ[i].data[j].id,
                          articletype: templ[i].data[j].type
                        }
                      },
                      webUrl: {
                        name: "/news/detail/",
                        params: {
                          id: templ[i].data[j].urlname
                        }
                      }
                    };
                    templ[i].data[j].urlExist = true;
                  }
                }
              }
            }
            _.templateData = templ;
             _.setToolBar({ title:_.templateData[0].title })
          } else {
            this.hasdata = 1;
          }
        })
        .catch(e => {
          this.toast(e.msg || "数据加载失败");
          this.hasdata = 1;
          console.error("CustomSubjectInfo error", e);
        });
    },
    gotoWeb_App: function(item, appurl, weburl) {
      console.log(item, item.urltype.appUrl, item.urltype.webUrl);
    },
    getCurrentUser: function(argument) {
      let params = this.$route.query;
      if (this.$root.ISAPP && this.$route.query) {
        this.CurrentUser = JSON.parse(decodeURIComponent(params.param));
        console.log(this.CurrentUser);
      }
      console.log(this.$root.ISAPP);
    },
    getConHon: function(item, index) {
      console.log("getConHon", this.CurrentUser, index);
      let _ = this;
      if (_.$root.ISAPP && _.CurrentUser) {
        if (item.linktype == 1) {
          console.log("优惠券码");
          var paramObjs = _.CurrentUser;
          paramObjs.cdkey = item.urlname;
          GetByCdkey(paramObjs)
            .then(function(res) {
              if (res) {
                _.toast("领取成功");
              } else {
                _.toast("领取失败");
              }
            })
            .catch(e => {
              if (e.code == 1511610) {
                _.toast("已经领取过了~~");
              } else if (e.code == 1511545) {
                _.toast("该账号已经在其他登录了哟~~");
              }
              // this.toast(e && e.msg ? e.msg : ('error:' + e));
            });
        } else if (item.linktype == 2) {
          var paramObjs = _.CurrentUser;
          paramObjs.subjectid = _.$route.params.id;
          paramObjs.type = 9;
          paramObjs.index = index;
          AddBeesBySubject(paramObjs)
            .then(function(res) {
              console.log(res);
              if (res) {
                _.toast("领取成功");
              } else {
                _.toast("领取失败");
              }
            })
            .catch(e => {
              if (e.code == 1511610) {
                _.toast("已经领取过了~~");
              } else if (e.code == 1511545) {
                _.toast("该账号已经在其他登录了哟~~");
              }
              // this.toast(e && e.msg ? e.msg : ('error:' + e));
            });
        }
      } else {
        _.toast("请在APP内领取~~");
      }
    },
    enterGS() {
      let url =
        "https://h5.qzone.qq.com/fashion/home?_wv=16778247&qzUseTransparentNavBar=1&_ws=32&_wwv=129&_proxy=1&pf=wanba_ts.106";
      if (window.mqq) {
        window.mqq.invoke("ui", "openUrl", {
          url: url,
          // 0为当前webview打开,1为新的webview打开,2为外部浏览器打开
          target: 1,
          // 0: 顶部标题栏模式（无底部工具栏）,1: 顶部标题栏无分享入口（无底部工具栏）,2: 底部工具栏模式（顶部标题依然会存在）,3: 底部工具栏模式且顶部无分享入口（顶部标题依然会存在）
          style: 0
        });
      } else window.open(url, "_new");
    },
    activeClick(e) {
      if (e.target && e.target.dataset) {
        let id = e.target.dataset.id || "";
        let typename = e.target.dataset.typename || "";
        if (id) this.mtaReport("zhuantiye_dj", { id, typename });
      }
    }
  },
  watch: {
    "$route.params.id": function(val, old) {
      console.log("watch active id", val, old);
      if (this.$route.name === "custom-activity" && val && val !== old) {
        this.templateData = {};
        this.getActiveConts();
      }
    }
  }
};
</script>
<style>
.active_template{
  max-width: 100vw;
  overflow: hidden;
}
.active_template.isHeadHide {
  margin-top: 0 !important;
}
.active_template ul.tempcontent > li img,
.imageurl img {
  width: 100%;
  display: block;
}

.active_template ul.tempcontent > li .templist.list_product .tempitem {
  width: 50%;
  padding: 1.5%;
  float: left;
  text-align: center;
}
.active_template ul.tempcontent > li .templist .tempitem p {
  margin: 3px 0;
  font-size: 12px;
  color: #666;
  text-align: center;
}
.active_template ul.tempcontent > li .templist p.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 16px;
  height: 16px;
}
.active_template
  ul.tempcontent
  > li
  .templist.list_product
  .tempitem
  p.price
  span {
  color: #666;
}
.active_template ul.tempcontent > li .templist.list_mixins {
  position: relative;
}
.active_template ul.tempcontent > li .templist.list_article .tempitem {
  width: 100%;
  float: none;
  text-align: center;
  margin-bottom: 10px;
}
.active_template ul.tempcontent > li .templist.list_video .tempitem {
  display: block;
  position: relative;
  width: 100%;
  float: none;
  min-height: 100px;
}
.active_template .list_product_fullScreen .swiper-container,
.active_template .list_product_fullScreen .full_bgimage {
  height: 100%;
}
.active_template .list_product_fullScreen .full_bgimage {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.fix-gs-endter {
  display: block;
  position: sticky;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  background-color: #fff;
}
.fix-gs-endter img {
  display: block;
}
</style>
